<template>
  <a-card :bordered="false">
    <keep-alive include="couponList">
    <component @onOrder="handleEdit" @onGoBack="handleGoBack" @onPicClick="handlePic" :record="record"
               :is="currentComponet"></component>
    </keep-alive>
  </a-card>
</template>

<script>
  import couponOrder from './couponOrderList'
  import couponList from './couponList'
  import picList from './picList'

  export default {
    name: 'info',
    components: {
      couponOrder,
      couponList,
      picList
    },
    data () {
      return {
        currentComponet: 'couponList',
        record: ''
      }
    },
    methods: {
      handleEdit (record) {
        this.record = record
        this.currentComponet = 'couponOrder'
      },
      handleGoBack () {
        this.record = ''
        this.currentComponet = 'couponList'
      },
      handlePic(record) {
        this.record = record
        this.currentComponet = 'picList'
      }
    },
    watch: {
      '$route.path' () {
        this.record = ''
        this.currentComponet = 'couponList'
      }
    }
  }
</script>